<template>
    <div v-loading="loading" style="width: 100%;">
        <div class="outSearchBox">
            <el-form :inline="true" ref="form">

                <el-form-item label="订单状态" style="margin-left: 100px;">
                    <el-select v-model="status" placeholder="请选择">
                        <el-option
                                v-for="item in statusData"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" circle @click="handelSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>

        </div>

        <div class="outTableBox">
            <el-table
                    :data="list"
                    border
                    style="width: 1071px">

                <el-table-column
                        width="180"
                        align="center"
                        prop="turnover_no"
                        label="订单号">
                </el-table-column>

                <el-table-column
                        width="180"
                        align="center"
                        prop="company"
                        label="购买厂家">
                </el-table-column>

                <el-table-column
                        width="110"
                        align="center"
                        prop="number"
                        label="购买数量">
                </el-table-column>

                <el-table-column
                        width="130"
                        align="center"
                        prop="total_price"
                        label="购买价格">
                </el-table-column>

                <el-table-column
                        width="200"
                        align="center"
                        prop="create_time"
                        label="购买时间">
                </el-table-column>

                <el-table-column
                        width="120"
                        align="center"
                        prop="status"
                        label="订单状态">
                    <template slot-scope="scope">
                        <span>
                            {{
                                scope.row.status === 0 ?
                                    '待审核'
                                : scope.row.status === 1 ?
                                    '待发货'
                                : scope.row.status === 2 ?
                                    '已发货'
                                : scope.row.status === 3 ?
                                    '已完成'
                                :   '审核不通过'
                            }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="info" @click="handleOrderInfo(scope.row.id)">订单详情</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'orderEnter',
        data(){
            return{
                list: [],
                total: 0,
                loading: false,
                statusData: [
                    {id: 1, name: '待发货'},
                    {id: 2, name: '已发货'},
                    {id: 3, name: '已完成'}
                ],
                status: ''
            }
        },

        methods:{
            defaultData(status){
                this.loading = true;
                this.$http.get('agent/turnover/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        turnover_type: 1,
                        agent_id: localStorage.getItem('user_id'),
                        status: 1
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;
                    }
                    this.loading = false;
                }).catch(error => {
                    console.log(error);
                    this.loading = false;
                })
            },

            //搜索
            handelSearch(){
                this.defaultData(this.status)
            },

            handleReset(){
                this.defaultData();
                this.status = '';
            },

            //查看订单详情
            handleOrderInfo(id){
                this.$router.push({name: 'orderInfo', query: {id: id, type: 'out'} })
            },


        },

        mounted() {
            this.defaultData();
        }

    }
</script>

<style>
    .outTableBox{
        margin-left: 300px;
    }

    .outSearchBox {
        height: 80px;
        width: 1360px;
        margin-left: 250px;
        margin-top: 40px;
    }
</style>